<template>
  <div class="dataasset-tags">
    <ul>
      <li v-for="item in dataassetTags" :key="item.indvCmntId">
        <el-tooltip effect="dark" :disabled="item.cmntDesc ? false : true" :content="item.cmntDesc" placement="top">
          <div>
            <icon-svg name="iconTag"></icon-svg>
            {{ item.cmntNm }}
            <i class="el-icon-close" @click="deleteTag(item)" v-if="tagStatus === 50"></i>
          </div>
        </el-tooltip>
      </li>
      <li><el-button icon="el-icon-plus" @click="showDialog" v-if="tagStatus === 50">新增备注</el-button></li>
    </ul>
    <el-drawer
      :visible.sync="drawerVisible"
      title="添加备注"
      size="60%"
      direction="rtl"
      :close-on-press-escape="false"
      :wrapperClosable="false"
      :destroy-on-close="true"
      :before-close="beforeClose"
      custom-class="tag-drawer tag-addition-drawer"
      v-drawerResize
    >
      <div class="drawer-wrap">
        <div class="drawer-content tag-scrollbar">
          <el-row class="tips">
            <p>创建并添加新的备注：</p>
          </el-row>
          <el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm" class="editForm">
            <el-form-item label="备注名称" prop="cmntNm">
              <el-input placeholder="请输入备注名称" v-model="editForm.cmntNm"></el-input>
            </el-form-item>
            <el-form-item label="备注描述" prop="cmntDesc">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入备注描述"
                v-model="editForm.cmntDesc"
                maxlength="500"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-form>
          <template v-if="tags.length">
            <el-row class="tips">
              <el-col>选择并添加已有个人备注：</el-col>
            </el-row>
            <ul>
              <li v-for="tag in tags" :key="tag.indvCmntId" @click="addDatasetTag(tag.indvCmntId)">
                <el-tooltip
                  effect="dark"
                  :disabled="tag.cmntDesc ? false : true"
                  :content="tag.cmntDesc"
                  placement="top"
                >
                  <div>
                    <icon-svg name="iconTag"></icon-svg>
                    {{ tag.cmntNm }}
                  </div>
                </el-tooltip>
              </li>
            </ul>
          </template>
        </div>
      </div>
      <div class="drawer-btns">
        <el-button @click="beforeClose()">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  props: {
    assetId: {
      type: String,
      required: true,
      default: ''
    },
    tagStatus: {
      type: Number,
      default: 50
    }
  },
  data() {
    return {
      drawerVisible: false,
      editForm: {
        cmntNm: '',
        cmntDesc: ''
      },
      editFormRules: {
        cmntNm: [
          { required: true, message: '备注名称不能为空', trigger: 'blur' },
          { min: 1, max: 10, message: '长度应在 1 到 10 个字符', trigger: 'blur' }
        ],
        cmntDesc: [
          { required: true, message: '备注描述不能为空', trigger: 'blur' },
          { min: 1, max: 500, message: '长度应在 1 到 500 个字符', trigger: 'blur' }
        ]
      },
      dataassetTags: [],
      tags: []
    }
  },
  created() {
    this.getDataassetTags()
  },
  methods: {
    getDataassetTags() {
      this.$ajax({
        url: this.$ajax.setUrl(`cac/cacAssetIndvCmnt/getIndvCmnt/${this.assetId}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.dataassetTags = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getTags() {
      this.$ajax({
        url: this.$ajax.setUrl(`cac/cacAssetIndvCmnt/userIndvCmnt/${this.assetId}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.tags = data.data
        } else {
          // 失败后执行的操作
        }
      })
    },
    deleteTag(item) {
      this.$confirm(`确定删除备注【${item.cmntNm}】?`, '提示').then(() => {
        let messageBox = document.getElementsByClassName('el-message-box__wrapper')
        messageBox[0].focus() // 防止按空格键重复确定
        this.$ajax({
          url: this.$ajax.setUrl(`cac/cacAssetIndvCmnt/removeIndvCmnt/${this.assetId}/${item.indvCmntId}`),
          method: 'delete',
          params: this.$ajax.setParams()
        }).then(({ data }) => {
          if (data && data.code === '0') {
            this.$message.success(data.msg)
            this.getDataassetTags()
          } else {
            this.$message.error(data.data || data.msg)
          }
        })
      })
    },
    showDialog() {
      this.getTags()
      this.drawerVisible = true
    },
    submit() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          this.addTag(this.editForm)
        }
      })
    },
    addTag(tag) {
      this.$ajax({
        url: this.$ajax.setUrl('cac/cacIndvCmnt/add'),
        method: 'post',
        data: this.$ajax.setData({
          cmntNm: tag.cmntNm,
          cmntDesc: tag.cmntDesc
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.addDatasetTag(data.data)
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    addDatasetTag(tag) {
      this.$ajax({
        url: this.$ajax.setUrl(`cac/cacAssetIndvCmnt/addIndvCmnt/${this.assetId}/${tag}`),
        method: 'post',
        data: this.$ajax.setData()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.clearDialog()
          this.getDataassetTags()
          this.drawerVisible = false
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    beforeClose() {
      this.drawerVisible = false
    },
    clearDialog() {
      this.editForm.cmntNm = ''
      this.editForm.cmntDesc = ''
      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate()
      })
    }
  }
}
</script>

<style lang="scss">
.dataasset-tags {
  ul {
    margin: 0;
    padding: 0;
    li {
      display: inline-block;
      margin: 0 10px 10px 0;
      padding: 10px;
      border: 1px dashed $border-color;
      text-align: center;
      cursor: pointer;
      &:last-child {
        padding: 0;
        border: 0;
      }
      svg {
        margin-right: 10px;
      }
      .el-icon-close {
        opacity: 0.2;
        &:hover {
          opacity: 1;
        }
      }
    }
  }
}
.tag-addition-drawer {
  .tips {
    margin: 10px 0 20px 30px;
  }
  ul {
    padding: 0 30px;
    li {
      display: inline-block;
      margin: 0 10px 10px 0;
      padding: 10px;
      border: 1px dashed $border-color;
      text-align: center;
      cursor: pointer;
      svg {
        margin-right: 10px;
      }
    }
  }
}
</style>
